
<script>
const styleConfig = [
  {
    type: 'point',
    key: 1,
  },
  {
    type: 'line',
    key: 2,
  },
  {
    type: 'polygon',
    key: 3,
  },
];
export default {
  name: 'ApplyStyle',
  props: {
    layerMsg: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      classify: [
        {
          value: ' ',
          label: '全部分类',
        },
      ],
      columns1: [
        {
          title: '样式别名',
          key: 'alias',
        },
        {
          title: '样式名称',
          key: 'name',
        },
        {
          title: '文件大小',
          key: 'size',
        },
      ],
      data: [], //获取的table的数据
      alias: '', //绑定inpt的别名值
      name: '', //绑定inpt的名字值
      classOne: '', //绑定inpt的样式值
      clickData: '', //绑定 点击table 选中的样式的值
      type: '', //给的参数的类型
    };
  },
  watch: {
    layerMsg: {
      handler(newVal) {
        if (Object.keys(newVal).length !== 0) {
          this.judgeType();
          this.search();
          this.getStyleTypes();
        }
      },
    },
  },
  methods: {
    //判断给的参数类型
    judgeType() {
      const style = styleConfig.filter(item => item.type === this.layerMsg.defaltstyle);
      if (style.length !== 0) {
        this.type = style[0].key;
      } else {
        this.type = '';
      }
    },
    //查询方法
    async search() {
      const params = this.getParams();
      const response = await api.db.findSyleByType(params);
      this.data = response.data;
    },
    //构造参数
    getParams() {
      const params = {
        // orgId: this.$user.orgid,
        type: this.type,
        alias: this.alias,
        name: this.name,
        classify: this.classOne,
      };
      return params;
    },
    //查询样式分类下拉框的数据
    async getStyleTypes() {
      const styleTypes = await api.db.styleTypes();
      this.classify = [
        {
          value: ' ',
          label: '全部分类',
        },
      ];
      styleTypes.data.forEach(item => {
        this.classify.unshift({
          value: item.code,
          label: item.remark,
        });
      });
    },
    reset() {
      this.alias = '';
      this.name = '';
      this.alias = '';
      this.search();
    },
    //修改样式
    async use() {
      this.$emit('on-set-layer-style', this.clickData);
    },
    //点击获取点击的那条数据
    getData(currentRow) {
      this.clickData = currentRow;
    },
  },
};
</script>

<template>
  <div class="mapedit-Select-Type">
    <p class="Select-Type-p">
      <span >样式别名:</span>
      <Input
        v-model="alias"
        size="small"
        style="width: 148px"></Input>
      <span
        style=" margin: 0 0 0 19px">样式名称:</span>
      <Input
        v-model="name"
        size="small"
        style="width: 148px"></Input>
      <span
        style=" margin: 0 0 0 19px"
      >样式分类:</span>
      <Select
        v-model="classOne"
        size="small"
        style="width:148px">
        <Option
          v-for="item in classify"
          :value="item.value"
          :key="item.value">{{ item.label }}</Option>
      </Select>
    </p>
    <p class="Select-Type-p">

      <Button
        type="primary"
        icon="ios-search"
        size="small"
        @click="search">查询</Button>
      <Button
        type="error"
        icon="close"
        size="small"
        @click="reset">重置</Button>
    </p>
    <div class="divTable">
      <Table
        :columns="columns1"
        :data="data"
        height="370"
        highlight-row
        @on-current-change="getData"></Table>
    </div>
    <span class="style-but">
      <Button
        type="success"
        size="small"
        @click="use"
      >应用</Button>
      <Button
        type="error"
        size="small">取消</Button>
    </span>


</div></template>

<style lang="less" scoped>
.mapedit-Select-Type {
  .divTable {
    width: 100%;
    overflow-y: auto;
  }
  .Select-Type-p {
    display: inline-block;
    margin: 8px;
  }
  .k-table {
    margin-top: 10px;
  }
  .style-but {
    float: right;
    margin-right: 20px;
    margin-top: 10px;
  }
}
</style>
